<template>
  <div>
    <div class="base-container">
      <p class="title">基本信息</p>
      <el-descriptions class="descriptions">
        <el-descriptions-item label="用户名称：">{{ basicInfo.userName }}</el-descriptions-item>
        <el-descriptions-item label="手机号码：">{{ basicInfo.mobile }}</el-descriptions-item>
        <el-descriptions-item label="用户编号：">{{ basicInfo.platformUserId }}</el-descriptions-item>
        <el-descriptions-item label="渠道用户编号：">{{ basicInfo.partnerId }}</el-descriptions-item>
        <el-descriptions-item label="来源渠道：">{{ basicInfo.channelName }}</el-descriptions-item>
        <!-- <el-descriptions-item label="用户昵称：">{{ basicInfo.userName }}</el-descriptions-item> -->
        <el-descriptions-item label="身份证号：">{{ basicInfo.userCertNo }}</el-descriptions-item>
        <el-descriptions-item label="平台注册时间：">{{ basicInfo.createTime }}</el-descriptions-item>
        <el-descriptions-item label="实名时间：" v-if="basicInfo.realNameAuthTime">{{ basicInfo.realNameAuthTime }}</el-descriptions-item>
        <el-descriptions-item label="用户状态：">
          <div style="display: inline-block">
            <dict-tag :options="plat_user_status" :value="basicInfo.status"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="注销时间：" v-if="basicInfo.accountCancellateTime">{{ basicInfo.accountCancellateTime }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div v-if="blackListInfo && blackListInfo.userState == 2" class="base-container mt-10px">
      <p class="title">拉黑信息</p>
      <el-descriptions class="descriptions">
        <el-descriptions-item label="拉黑状态：">
          <div style="display: inline-block">
            <dict-tag :options="bus_user_black_list" :value="blackListInfo.userState"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="拉黑时间：">{{ blackListInfo.blackTime }}</el-descriptions-item>
        <!-- <el-descriptions-item label="解封时间：">{{  }}</el-descriptions-item> -->
        <el-descriptions-item :span="3" label="拉黑原因：">{{ blackListInfo.remark }}</el-descriptions-item>
        <!-- <el-descriptions-item :span="3" label="解封原因：">{{  }}</el-descriptions-item> -->
      </el-descriptions>
    </div>
    <div class="base-container mt-10px">
      <p class="title">交易信息</p>
      <el-descriptions class="descriptions">
        <el-descriptions-item label="支付模式：">
          <div style="display: inline-block;">
            <dict-tag :options="plat_order_pay_mode" :value="info.payModel"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="累计交易金额：">{{ formatAmount(tradeInfo.actualPayTotal) }}元</el-descriptions-item>
        <el-descriptions-item label="累计优惠金额：">{{ formatAmount(tradeInfo.couponFeeTotal) }}元</el-descriptions-item>
        <!-- <el-descriptions-item label="乘车次数：">{{ tradeInfo.ridesCount }}次</el-descriptions-item> -->
        <el-descriptions-item v-if="tradeInfo.needPayOrderNum > 0" label="待付订单：" class-name="unpay" label-class-name="unpay">{{ tradeInfo.needPayOrderNum }}笔</el-descriptions-item>
        <el-descriptions-item v-if="tradeInfo.needPayOrderSum > 0" label="待付金额：" class-name="unpay" label-class-name="unpay">{{ formatAmount(tradeInfo.needPayOrderSum) }}元</el-descriptions-item>
      </el-descriptions>
    </div>
    <div v-if="basicInfo.cardNo" class="base-container mt-10px">
      <p class="title">电子卡信息</p>
      <el-descriptions class="descriptions">
        <el-descriptions-item label="电子卡号：">{{ basicInfo.cardNo }}</el-descriptions-item>
        <!-- <el-descriptions-item label="卡类型：">
          <div style="display: inline-block">
            <dict-tag :options="electronic_card_type" :value="basicInfo.cardType"/>
          </div>
        </el-descriptions-item> -->
        <el-descriptions-item label="卡押金：">{{ formatAmount(info.depositSum) }}元</el-descriptions-item>
        <!-- <el-descriptions-item label="电子卡余额：">{{ formatAmount(info.amount) }}元</el-descriptions-item> -->
        <!-- <el-descriptions-item label="卡限制：">{{  }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="剩余次数：">{{  }}</el-descriptions-item> -->
        <el-descriptions-item label="平台开卡时间：">{{ basicInfo.createTime }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div v-if="wxSignInfo" class="base-container mt-10px">
      <div class="title-box">
        <p class="label">微信代扣签约信息</p>
        <p v-if="wxSignInfo.sort" class="sort">{{ wxSignInfo.sort }}</p>
      </div>
      <el-descriptions class="descriptions">
        <el-descriptions-item label="免密代扣：">
          <div style="display: inline-block">
            <dict-tag :options="plat_user_bind_status" :value="wxSignInfo.bindStatus"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="签约商户号：">{{ wxSignInfo.mchId }}</el-descriptions-item>
        <el-descriptions-item label="签约序列号：">{{ wxSignInfo.contractCode }}</el-descriptions-item>
        <el-descriptions-item label="签约时间：">
          <span>{{ parseTime(wxSignInfo.bindTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="wxSignInfo.bindStatus == 3" label="解约时间：">
          <span>{{ parseTime(wxSignInfo.unbindTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div v-if="aliSignInfo" class="base-container mt-10px">
      <div class="title-box">
        <p class="label">支付宝代扣签约信息</p>
        <p v-if="aliSignInfo.sort" class="sort">{{ aliSignInfo.sort }}</p>
      </div>
      <el-descriptions class="descriptions">
        <el-descriptions-item label="免密代扣：">
          <div style="display: inline-block">
            <dict-tag :options="plat_user_bind_status" :value="aliSignInfo.bindStatus"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="签约商户号：">{{ aliSignInfo.mchId }}</el-descriptions-item>
        <el-descriptions-item label="签约序列号：">{{ aliSignInfo.contractCode }}</el-descriptions-item>
        <el-descriptions-item label="签约时间：">
          <span>{{ parseTime(aliSignInfo.bindTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="aliSignInfo.bindStatus == 3" label="解约时间：">
          <span>{{ parseTime(aliSignInfo.unbindTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div v-if="logoffInfo" class="base-container mt-10px">
      <p class="title">销户信息</p>
      <el-descriptions class="descriptions">
        <el-descriptions-item label="申请状态：">
          <div style="display: inline-block">
            <dict-tag :options="user_logoff_status" :value="logoffInfo.auditStatus"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="申请时间：">{{ logoffInfo.createTime }}</el-descriptions-item>
        <template v-if="logoffInfo.auditStatus != 1">
          <el-descriptions-item label="审核时间：">{{ logoffInfo.auditTime }}</el-descriptions-item>
          <el-descriptions-item label="备注：">{{ logoffInfo.auditMsg }}</el-descriptions-item>
        </template>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup>
import { getPlatuserinfo } from "@/api/user/list"
const props = defineProps(['userId'])
const emits = defineEmits(['update'])
const { proxy } = getCurrentInstance()
const { plat_user_status, plat_order_pay_mode, bus_user_black_list, electronic_card_type, plat_user_bind_status, user_logoff_status } = proxy.useDict('plat_user_status', 'plat_order_pay_mode', 'bus_user_black_list', 'electronic_card_type', 'plat_user_bind_status', 'user_logoff_status')

const info = ref({})
const basicInfo = ref({})
const tradeInfo = ref({})
const wxSignInfo = ref()
const aliSignInfo = ref()
const blackListInfo = ref(null)
const logoffInfo = ref()

const getDetail = () => {
  getPlatuserinfo(props.userId).then(res => {
    const data = res.data
    info.value = data
    basicInfo.value = data.platUserInfo || {}
    tradeInfo.value = data.platUserOrderSummaryInfo || {}
    blackListInfo.value = data.platUserBlackList
    logoffInfo.value = data.platUserCancelRecord
    data.platUserContractList.forEach(obj => {
      if (obj.contractType == 1) {
        wxSignInfo.value = obj
      } else if (obj.contractType == 2) {
        aliSignInfo.value = obj
      }
    })
    if (wxSignInfo.value && wxSignInfo.value.bindStatus == 1 && aliSignInfo.value && aliSignInfo.value.bindStatus == 1) {
      // 微信支付宝都签约了代扣
      const wxBindTime = proxy.parseTime(wxSignInfo.value.bindTime, '{y}-{m}-{d} {h}:{i}:{s}')
      const aliBindTime = proxy.parseTime(aliSignInfo.value.bindTime, '{y}-{m}-{d} {h}:{i}:{s}')
      if (wxBindTime > aliBindTime) {
        aliSignInfo.value.sort = 1
        wxSignInfo.value.sort = 2
      } else {
        aliSignInfo.value.sort = 2
        wxSignInfo.value.sort = 1
      }
    }
    emits('update', basicInfo.value.platformUserId)
  })
}

getDetail()
</script>

<style lang="scss" scoped>
.title-box {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgb(225, 225, 225);

  .label {
    color: rgb(31, 31, 31);
    font-size: 16px;
    font-weight: 500;
  }

  .sort {
    width: 20px;
    height: 20px;
    margin-left: 5px;
    font-size: 15px;
    border-radius: 10px;
    background-color: #d1edc4;
    text-align: center;
    line-height: 20px;
    color: #67c23a;
  }
}

.title {
  color: rgb(31, 31, 31);
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgb(225, 225, 225);
}

.descriptions {
  :deep(.el-descriptions__cell) {
    width: 33.33%
  }

  :deep(.el-descriptions__content) {
    word-break: break-all;
  }
}

:deep(.unpay) {
  color: #F64C4C !important;
}
</style>